/**
 * 使用高阶组件的方式从仓库中获取数据， react-redux 中 connect()
 *    connect() - 链接
 *        语法：
 *           const NewComponent =  connect(mapStateToProps, mapDispatchToProps)(WrappedComponent)
 *                1. mapStateToProps - 映射仓库state到WrappedComponent的Props上的一个函数
 *                2. mapDispatchToProps - 映射仓库修改state的操作到WrappedComponent的Props上的一个函数
 *                3. WrappedComponent - 需要被包装的组件
 *                4. NewComponet - 返回的新组件
 *
 */

import { connect } from "react-redux";

function Hello(props: any) {
  console.log("Hello props", props);
  return (
    <div>
      <h4>Hello</h4>
      <p>count: {props.count}</p>
      <button onClick={props.add}>Add</button>
    </div>
  );
}

/**
 * 映射仓库state数据到组件(Hello)上
 *    该函数默认会触发一次，当仓库数据发生变化时，会再次触发，组件收到的props就能更新
 * @param state 仓库的 state 数据，
 * @param props 当前组件，收到的 Props
 * @returns 返回一个普通对象，对象会合并到 Hello 组件的 props 上。
 */
function mapStateToProps(state: any, props: any) {
  console.log("state", state);
  console.log("props", props);
  return {
    count: state.count,
  };
}

/**
 * @param dispatch store.dispatch 的引用
 * @param props 当前组件，收到的 Props
 * @returns 返回一个普通对象，该对象会合并到 Hello 组件的 props 上。（该对象的属性值一般为函数）
 */
function mapDispatchToProps(dispatch: any, props: any) {
  return {
    add() {
      // 操作 dispatch 修改仓库数据
      dispatch({ type: "increment" });
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);
